<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <style>
        .center {
            max-width: 450px;
            margin: 0 auto;
            border: 1px solid #ccc;
            padding: 4% 3% 10% 3%;
            background-color: #FFFFFF;
        }

        input {
            width: 90%;
            padding: 8px;
            border: 1px solid #ccc;
            margin: 5px 0;
        }


        #captchaImg {
            display: flex;
            align-items: center;
            width: 60%;
            padding: 5px;
            border: 1px solid #ccc;
            background-color: #FEAAA9;
        }

        .submit-ok {
            width: 80%;
            background: rgb(75, 213, 75);
            padding: 10px;
            color: white;
            width: 100%;
        }

        .password-requirement {
            font-size: 15px;
            background-color: #F8F9FA;
            color: #6C757D;
            margin: 7% auto;
        }
    </style>
</head>

<body style="background-color: #1f49c7">
    <div class="center">
        <h1 style="text-align: center;">注册新账户</h1>
        <form action="" method="post">
            <table border="0" width="100%" cellspacing="0px">
                <tr>
                    <td>用户名</td>
                    <td colspan="2"><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td colspan="2"><input type="password" id="password" name="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td colspan="2"><input type="password" id="confirmPassword" name="confirmPassword"
                            placeholder="请再次输入密码"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td width="64.7%"><input type="text" id="captcha" placeholder="请输入验证码"></td>
                    <td><span id="captchaImg" onclick="refreshCaptcha()">ikun</span></td>
                </tr>
            </table>

            <div class="password-requirement">
                <strong>密码要求：</strong>
                <ul>
                    <li>至少8个字符</li>
                    <li>包含大写字母 (A-Z)</li>
                    <li>包含小写字母 (a-z)</li>
                    <li>包含数字 (0-9)</li>
                    <li>包含特殊字符 (!@#$%^&*)</li>
                </ul>
            </div>

            <button type="button" class="submit-ok" onclick="check()">注册账号</button>
        </form>
    </div>

    <script>

        function check() {

            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            const confirmPassword = document.getElementById('confirmPassword').value;
            const captcha = document.getElementById('captcha').value;
            const captchaImg = document.getElementById('captchaImg').textContent;


            if (username.trim() === '') {
                alert('用户名不能为空！');
                return;
            }

            if (password.trim() === '') {
                alert('密码不能为空！');
                return;
            }

            if (confirmPassword.trim() === '') {
                alert('确认密码不能为空！');
                return;
            }

            if (captcha.trim() === '') {
                alert('验证码不能为空！');
                return;
            }

            if (password.length < 8) {
                alert('密码长度至少需要8位！');
                return;
            }

            if (password !== confirmPassword) {
                alert('两次输入的密码不一致！');
                return;
            }


            let hasUpperCase = false;
            let hasLowerCase = false;
            let hasNumbers = false;
            let hasSpecial = false;


            for (let i = 0; i < password.length; i++) {
                const char = password[i];

                if (char >= 'A' && char <= 'Z') {
                    hasUpperCase = true;
                }

                else if (char >= 'a' && char <= 'z') {
                    hasLowerCase = true;
                }

                else if (char >= '0' && char <= '9') {
                    hasNumbers = true;
                }

                else if ('!@#$%^&*'.includes(char)) {
                    hasSpecial = true;
                }
            }


            if (!hasUpperCase) {
                alert('密码必须包含至少一个大写字母！');
                return;
            }

            if (!hasLowerCase) {
                alert('密码必须包含至少一个小写字母！');
                return;
            }

            if (!hasNumbers) {
                alert('密码必须包含至少一个数字！');
                return;
            }

            if (!hasSpecial) {
                alert('密码必须包含至少一个特殊字符（!@#$%^&*）！');
                return;
            }

            if (captcha !== captchaImg) {
                alert('验证码错误！');
                return;
            }

            alert('注册成功！');
            /*
            当按钮与表单提交按钮同时存在时
            会先执行事件监听函数，再自动触发表单的提交事件
            可以在事件处理函数中添加 event.preventDefault() 方法来阻止触发表单的提交事件
            */

            // event.preventDefault();  // 阻止触发表单的提交事件

            // document.getElementById('registrationForm').submit(); // 手动提交表单
        }


        function refreshCaptcha() {
            const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz1234567890';
            let result = '';
            for (let i = 0; i < 4; i++) {
                const index = Math.floor(Math.random() * chars.length);
                result += chars[index];
            }
            document.getElementById('captchaImg').textContent = result;
        }
    </script>
</body>

</html>